<template>
  <ep-modal v-model="showModal" :title="title" size="mini" @close="closeHandle">
    <ep-notice-bar
      class="tips"
      color="#999"
      background="#fff"
      left-icon="ion-ios-information-outline"
      text="弹窗模式建议在字段较少,操作较简单的情况下使用"
    />
    <ep-form ref="form" :form="form" :rules="rules" size="normal" name-width="100px">
      <ep-form-item label="收款方机构" attr="payeeName" :show-message="false">
        <ep-input v-model="form.payeeName"></ep-input>
      </ep-form-item>
      <ep-form-item label="付款方机构">
        <ep-input v-model="form.payerName"></ep-input>
      </ep-form-item>
      <ep-form-item label="业务类型">
        <ep-input v-model="form.bizType"></ep-input>
      </ep-form-item>
      <ep-form-item label="货币类型">
        <ep-select v-model="form.payableCurr">
          <ep-select-item index="CNY" label="CNY"></ep-select-item>
          <ep-select-item index="USD" label="USD"></ep-select-item>
        </ep-select>
      </ep-form-item>
      <ep-form-item label="状态">
        <ep-select v-model="form.status">
          <ep-select-item index="0" label="无效"></ep-select-item>
          <ep-select-item index="1" label="有效"></ep-select-item>
        </ep-select>
      </ep-form-item>
    </ep-form>
    <div class="btn-wrapper">
      <ep-button @click="showModal = false">取消</ep-button>
      <ep-button type="primary" @click="handleSave('form')">保存</ep-button>
    </div>
  </ep-modal>
</template>

<script>
import { cloneObj } from '@/utils/data'
export default {
  name: 'modal',
  props: {
    title: {
      type: String,
      default: '新增数据'
    },
    formData: {
      type: Object,
      default() {
        return {
          payeeName: '',
          payerName: '',
          bizType: '',
          status: '',
          payableCurr: ''
        }
      }
    }
  },
  watch: {
    formData(val) {
      if (val) {
        this.form = cloneObj(val)
      }
    }
  },
  data() {
    return {
      showModal: false,
      rules: {
        payeeName: { required: true, trigger: 'submit' }
      },
      form: {}
    }
  },
  methods: {
    handleSave(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$pop({
            type: 'success',
            message: '保存成功'
          })
          this.showModal = false
          this.$emit('saveHandle', this.form)
        }
      })
    },
    closeHandle() {
      this.form = this.$options.data().form
    }
  }
}
</script>

<style lang="less" scoped>
.tips {
  margin-bottom: 10px;
}
.btn-wrapper {
  width: 100%;
  text-align: right;
}
/deep/.ep-notice-bar {
  padding: 0;
}
</style>
